<template>

  <div style=" width: 100%; height: 100%;overflow: hidden">
    <Modal v-model:visible="visible1" title="确认已经和客户协商退款意向下，现在进行全额退款操作?" @ok="refundFn" :confirmLoading="loading">
    </Modal>
    <!--  <Modal v-model:visible="visible2" title="确定帮用户取消订单?" @ok="cancelFn"></Modal>-->
    <!--    <div style="background: white;">-->
    <!--      <RadioGroup v-model:value="size" style="margin-top: 20px;margin-left: 20px;background: white;" @change="statusChange">-->
    <!--        <RadioButton value="small">-->
    <!--          待付款-->
    <!--        </RadioButton>-->
    <!--        <RadioButton value="default">-->

    <!--          <Badge count="5">-->
    <!--            <span>待发货</span>-->
    <!--          </Badge>-->
    <!--          </RadioButton>-->
    <!--        <RadioButton value="large">成功</RadioButton>-->
    <!--      </RadioGroup>-->
    <!--    </div>-->
    <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      <template #toolbar_buttons>
        <Button type="primary" @click="handleCreate" style="margin-right: 10px"> 创建线下订单 </Button>
      </template>
      <template #expand_content="{ row }">

        <Table :columns="childColumns" :data-source="row.items" size="small" :bordered="true" :pagination="false">
          <template #goodMainImg="{ record }">
            <Image :width="30" :height="30" :src="record.goodMainImg"></Image>
          </template>
          <template #specification="{ record }">
            {{ record.specification }}
          </template>
        </Table>


      </template>
      <template #action="{ row }">
        <TableAction outside :actions="createActions(row)" />
      </template>


    </VxeBasicTable>
    <FormModal @register="register" @success="handleSuccess" />
    <SendModal @register="userModal[0]" @success="handleSuccess" />
    <AddFormModal @register="addModal[0]" @success="handleSuccess" />
  </div>

</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction, ActionItem } from '@/components/Table';
import { orderListApi, refundApi, markApi, editConsigneeInfoApi } from '@/api/sys/sysOrder';
import { formatToDateTime } from '@/utils/dateUtil';

import {
  Modal, Button,
  Table, Image
} from 'ant-design-vue';
import FormModal from './FormModal.vue';
import SendModal from './SendModal.vue';
import AddFormModal from './AddFormModal.vue';

import { reactive, ref, onMounted } from 'vue';
import { vxeTableColumns, vxeTableFormSchema, searchFormSchema, childColumns } from './role.data';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
} from '@/components/VxeTable';

defineOptions({ name: 'orderList' });
const { createMessage } = useMessage();

const [register, { openModal, closeModal }] = useModal();

const userModal = useModal();
const addModal = useModal();


const visible1 = ref(false); //收货确认
const visible2 = ref(false); //取消确认
const selectObj = ref({});
const loading = ref(false);


const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  id: 'VxeTable',
  keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  showOverflow: true,
  size: 'mini',
  height: 'auto',
  columns: vxeTableColumns,
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  formConfig: {
    enabled: true,
    items: vxeTableFormSchema,
  },
  pagerConfig: {
    pageSize: 20,
  },
  proxyConfig: {
    props: {
      result: 'data.list',
      list: 'data.list',
      total: 'data.totalResult',
      message: 'message',
    },
    ajax: {
      query: async (re) => {
        // {page, form}
        console.log("---re:", re);
        let p = {
          page: re.page.currentPage,
          pageSize: re.page.pageSize,
          ...re.form,
        }
        return orderListApi(p);
      },
      // queryAll: async ({ form }) => {
      //   return await demoListApi(form);
      // },
    },
  },
});

onMounted(() => {
  //
  //1736675577
  // let d = new Date(1736675577000);
  // console.log("--d:", d);
  // let d2 = new Date();
  // console.log("--d2:", d2.getMinutes());

  // let action_time_value = formatToDateTime(d);
  // console.log("---action_time_value::", action_time_value);

})

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
  });
  // visible1.value = true;
  // selectObj.value = record;
}

// 操作按钮（权限控制）
const createActions = (record) => {
  const actions: ActionItem[] = [
    {
      label: '详情',
      onClick: () => {
        handleEdit(record);
      },
    },


  ];
  if (record.orderStatus == 2) {
    actions.push({
      label: '发货',
      color: 'success',
      onClick: () => {
        // console.log(record);
        openUserModal(record);
      },
    })
  }
  //全额退款

  if (record.source == 1 && record.orderStatus != 1 && record.orderStatus != 6 && !record.outRefundNo) {
    actions.push({
      label: '退款',
      color: 'error',
      onClick: () => {
        // console.log(record);
        handleRefund(record);
      },
    })
  }
  return actions;
};


function handleCreate(record: Recordable) {
  // openModal(true, {
  //   isUpdate: false,
  // });
  addModal[1].openModal(true, {
    isUpdate: false,
  });
}



function handleRefund(record: Recordable) {
  //console.log(record);
  visible1.value = true;
  selectObj.value = record;

}

function refundFn() {
  loading.value = true;
  let json = { orderId: selectObj.value.orderId };
  refundApi(json)
    .then((res) => {
      visible1.value = false;

      createMessage.success(res.message);
    })
    .catch((res) => {
      createMessage.error(res.message);
    })
    .finally(() => {
      loading.value = false;

      handleSuccess();
    });
}



function handleSuccess() {
  tableRef.value.commitProxy('reload')

}

function statusChange(e) {
  let data = {
    page: {
      currentPage: 1,
      pageSize: 20
    }, form: {
      orderStatus: 2
    }
  }
  tableRef.value.commitProxy('query', { ...data });
}


function openUserModal(record: Recordable) {
  userModal[1].openModal(true, {
    isUpdate: false,
    record
  });
}

</script>
